/**
 * Created by cixing on 2017/12/8.
 */
/*document.querySelector只能获取 html中用style=""来写的属性值*/
var wrap = document.querySelector(".wrap");
var next = document.querySelector(".arrow_right");
var prev = document.querySelector(".arrow_left");
var chapter1 = document.querySelector(".chapter1");
var chapter2 = document.querySelector(".chapter2");
var chapter3 = document.querySelector(".chapter3");
var chapter4 = document.querySelector(".chapter4");
next.onclick = function () {
    next_pic();
};
prev.onclick = function () {
    prev_pic();
};
function next_pic () {
    var newLeft;
    if(wrap.style.left === "-2280px"){
        newLeft = -760;
    }else{
        newLeft = parseInt(wrap.style.left)-380;
    }
    wrap.style.left = newLeft + "px";
}
function prev_pic () {
    var newLeft;
    if(wrap.style.left === "0px"){
        newLeft = -1520;
    }else{
        newLeft = parseInt(wrap.style.left)+380;
    }
    wrap.style.left = newLeft + "px";
}
document.getElementById("button_1").onclick=function(){
    wrap.style.left =-380 + "px" ;
};
document.getElementById("button_2").onclick=function(){
    wrap.style.left =-760 + "px" ;
};
document.getElementById("button_3").onclick=function(){
    wrap.style.left =-1140 + "px" ;
};
document.getElementById("button_4").onclick=function(){
    wrap.style.left =-1520 + "px" ;
};
document.getElementById("button_5").onclick=function(){
    wrap.style.left =-1900 + "px" ;
};
/*实现自动播放第二部分图片*/
var timer = null;
function autoPlay () {
    timer = setInterval(function () {
        next_pic();
    },1000);
}
autoPlay();

/*鼠标移到图片，自动播放停止，离开播放继续*/
function mOver() {
    clearInterval(timer);
}
function mOut() {
    autoPlay();
}
document.getElementById("waimai").onclick=function(){
    chapter1.style.display="inline" ;
    chapter2.style.display="none";
    chapter3.style.display="none";
    chapter4.style.display="none";
};

document.getElementById("find").onclick=function(){
    chapter1.style.display="none" ;
    chapter2.style.display="inline-block";
    chapter3.style.display="none";
    chapter4.style.display="none";
};
document.getElementById("form").onclick=function(){
    chapter1.style.display="none" ;
    chapter2.style.display="none";
    chapter3.style.display="inline-block"
    chapter4.style.display="none";
};
document.getElementById("mine").onclick=function(){
    chapter1.style.display="none" ;
    chapter2.style.display="none";
    chapter3.style.display="none";
    chapter4.style.display="inline-block";
};
